<template>
  <AplidCharts type="line" :option="option"></AplidCharts>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import AplidCharts from "@/components/AplidCharts/index.vue";

// let props = defineProps({
//   xAxisData:{
//     type:Array,
//     default:()=>([])
//   },
//   legendData:{
//     type:Array,
//     default:()=>([])
//   },
//   metaDate:{
//     type:Array,
//     default:()=>([])
//   }
// })
var xAxisData = [
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "2023-12月",
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
];
var legendData = ["日常", "月度"];
var title = "";
var serieData = [];
var metaDate = [
  [
    26518, 26025, 28916, 22919, 31125, 29473, 14088, 983, 1149, 3426, 368,
    57604,
  ],
  [
    12484, 12468, 12378, 12321, 11270, 9676, 8290, 12507, 12508, 12509, 12510,
    12502,
  ],
];

for (var v = 0; v < legendData.length; v++) {
  var serie = {
    name: legendData[v],
    type: "line",
    symbol: "circle",
    symbolSize: 10,
    data: metaDate[v],
    emphasis: {
      label: {
        show: true,
        color: "white",
        position: "top",
      },
    },
  };
  serieData.push(serie);
}
var colors = ["#03D5FF", "#1978E5"];

let option = {
  backgroundColor: "",
  title: {
    text: title,
    textAlign: "left",
    textStyle: { color: "#fff", fontSize: "16", fontWeight: "normal" },
  },
  legend: {
    show: true,
    left: "right",
    data: legendData,
    y: "5%",
    itemWidth: 18,
    itemHeight: 12,
    textStyle: { color: "#fff", fontSize: 14, border: "1px solid red" },
  },
  color: colors,
  grid: {
    left: "2%",
    top: "12%",
    bottom: "5%",
    right: "5%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" },
    extraCssText: "z-index:10",
  },
  xAxis: [
    {
      type: "category",
      axisLine: { show: true, lineStyle: { color: "#6173A3" } },
      axisLabel: {
        interval: 0,
        rotate: 40,
        textStyle: { color: "#fff", fontSize: 14 },
      },
      axisTick: { show: false },
      data: xAxisData,
    },
  ],
  yAxis: [
    {
      axisTick: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#2B4357",
          type: "dashed",
        },
      },
      axisLabel: { textStyle: { color: "#fff", fontSize: 14 } },
      axisLine: { show: true, lineStyle: { color: "#6173A3" } },
    },
  ],
  series: serieData,
};
</script>
<style scoped lang="scss"></style>
